<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<meta name="format-detection" content="telephone=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
		<title>我房旅居</title>
		<link rel="stylesheet" type="text/css" href="css/reset.css" />
		<link rel="stylesheet" type="text/css" href="css/footer.css" />
		<link rel="stylesheet" type="text/css" href="css/swiper.min.css" />
		<link rel="stylesheet" type="text/css" href="css/main.css" />

	</head>

	<body>
		<div class="mask"></div>
		<header>
			<a href="javascript:history.go(-1);" class="back"><img src="images/icon/back.png" /></a>
			<a href="city.html" class="location">海口</a>
			<h1>我房旅居</h1>
		</header>
		<form class="search-list row">
			<div class="row">
				<img src="images/icon/search_gray.png" alt="">
				<input type="text" placeholder="请输入关键词">
			</div>
		</form>
		<div class="building-list-box">
			<div class="filter">
				<ul class="row">
					<li onclick="clickOption(this)">位置</li>
					<li onclick="clickOption(this)">价格</li>
					<li onclick="clickOption(this)">房型</li>
					<li onclick="clickOption(this)">更多</li>
				</ul>
				<div class="options">
					<div class="option">
						<div class="area row">
							<div class="option-provice column">
								<a href="#" onclick="clickProvice(this,0)">不限</a>
								<a href="#" onclick="clickProvice(this,1)">海南</a>
								<a href="#" onclick="clickProvice(this,1)">云南</a>
								<a href="#" onclick="clickProvice(this,1)">广西</a>
								<a href="#" onclick="clickProvice(this,1)">广东</a>
								<a href="#" onclick="clickProvice(this,1)">海南</a>
								<a href="#" onclick="clickProvice(this,1)">云南</a>
								<a href="#" onclick="clickProvice(this,1)">广西</a>
								<a href="#" onclick="clickProvice(this,1)">广东</a>
								<a href="#" onclick="clickProvice(this,1)">海南</a>
								<a href="#" onclick="clickProvice(this,1)">云南</a>
								<a href="#" onclick="clickProvice(this,1)">广西</a>
								<a href="#" onclick="clickProvice(this,1)">广东</a>
							</div>
							<div class="option-city column">
								<a href="#" onclick="clickCity(this,0)">不限</a>
								<a href="#" onclick="clickCity(this,1)">海口</a>
								<a href="#" onclick="clickCity(this,1)">琼海</a>
								<a href="#" onclick="clickCity(this,1)">文昌</a>
								<a href="#" onclick="clickCity(this,1)">儋州</a>
							</div>
							<div class="option-area column">
								<a href="#" onclick="clickArea(this)">不限</a>
								<a href="#" onclick="clickArea(this)">美兰区</a>
								<a href="#" onclick="clickArea(this)">龙华区</a>
							</div>
						</div>
					</div>
					<div class="option">
						<ul class="option-price">
							<li onclick="clickPrice(this)"><a href="#">不限</a></li>
							<li onclick="clickPrice(this)"><a href="#">5000元/㎡以下</a></li>
							<li onclick="clickPrice(this)"><a href="#">5000-8000元/m²</a></li>
							<li onclick="clickPrice(this)"><a href="#">8000-1万元/m²</a></li>
							<li onclick="clickPrice(this)"><a href="#">1-1.2万元/m²</a></li>
							<li onclick="clickPrice(this)"><a href="#">1.2-1.5万元/m²</a></li>
							<li onclick="clickPrice(this)"><a href="#">1.5-2万元/m²</a></li>
							<li onclick="clickPrice(this)"><a href="#">2万元/m²以上</a></li>
						</ul>
					</div>
					<div class="option">
						<ul class="option-house">
							<li onclick="clickType(this)">
								<a href="javascript:;" class="row">
									<span>一居</span>
									<i></i>
								</a>
							</li>
							<li onclick="clickType(this)">
								<a href="javascript:;" class="row">
									<span>二居</span>
									<i></i>
								</a>
							</li>
							<li onclick="clickType(this)">
								<a href="javascript:;" class="row">
									<span>三居</span>
									<i></i>
								</a>
							</li>
							<li onclick="clickType(this)">
								<a href="javascript:;" class="row">
									<span>四居</span>
									<i></i>
								</a>
							</li>
							<li onclick="clickType(this)">
								<a href="javascript:;" class="row">
									<span>复式</span>
									<i></i>
								</a>
							</li>
						</ul>
					</div>
					<div class="option more-option">
						<div class="option-box">
							<div class="tabBox">
								<p>类型</p>
								<div class="tab row">
									<a href="javascript:;" onclick="clickTab(this)">住宅</a>
									<a href="javascript:;" onclick="clickTab(this)">写字楼</a>
									<a href="javascript:;" onclick="clickTab(this)">产权式酒店</a>
									<a href="javascript:;" onclick="clickTab(this)">住宅</a>
									<a href="javascript:;" onclick="clickTab(this)">写字楼</a>
									<a href="javascript:;" onclick="clickTab(this)">产权式酒店</a>
								</div>
							</div>
							<div class="tabBox">
								<p>特色</p>
								<div class="tab row">
									<a href="javascript:;" onclick="clickTab(this)">住宅</a>
									<a href="javascript:;" onclick="clickTab(this)">写字楼</a>
									<a href="javascript:;" onclick="clickTab(this)">前六月已开盘</a>
								</div>
							</div>
							<div class="tabBox">
								<p>销售状态</p>
								<div class="tab row">
									<a href="javascript:;" onclick="clickTab(this)">住宅</a>
									<a href="javascript:;" onclick="clickTab(this)">写字楼</a>
									<a href="javascript:;" onclick="clickTab(this)">前六月已开盘</a>
								</div>
							</div>
							<div class="tabBox">
								<p>装修</p>
								<div class="tab row">
									<a href="javascript:;" onclick="clickTab(this)">住宅</a>
									<a href="javascript:;" onclick="clickTab(this)">写字楼</a>
									<a href="javascript:;" onclick="clickTab(this)">前六月已开盘</a>
								</div>
							</div>
							<div class="tabBox">
								<p>开盘时间</p>
								<div class="tab row">
									<a href="javascript:;" onclick="clickTab(this)">住宅</a>
									<a href="javascript:;" onclick="clickTab(this)">写字楼</a>
									<a href="javascript:;" onclick="clickTab(this)">前六月已开盘</a>
								</div>
							</div>
						</div>
						<div class="tabBtn row">
							<a href="javascript:;" class="reset">重置</a>
							<a href="javascript:;" class="sure">确定</a>
						</div>
					</div>
				</div>
			</div>
			<div class="building-scan">
				<div class="scan-list">
					<a href="tel:0898" class="tel"><img src="images/icon/tel.png" alt=""></a>
					<a href="#" class="row">
						<img src="images/list.jpg" alt="" class="scan-pic">
						<div class="column">
							<div class="row">
								<h2>儋州商圈</h2>
								<label class="row wait">待售</label>
							</div>
							<em>13000-23000/㎡</em>
							<div class="row">
								<img src="images/icon/location.png" alt="">
								<p>儋州市迎宾大道与国盛路交汇处</p>
							</div>
							<div class="row">
								<span class="row">特色别墅</span>
								<span class="row">宜居生态</span>
								<span class="row">景观居所</span>
							</div>
						</div>
					</a>
					<div class="main-box">
						<div class="main-house" onclick="clickHouse(this,1)">主推户型&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;5居/4居/3居</div>
						<div class="swiper-container">
							<div class="swiper-wrapper">
								<a class="swiper-slide column">
									<img src="images/banner.jpg" />
									<p>1房1厅1卫80㎡</p>
								</a>
								<a class="swiper-slide column">
									<img src="images/banner.jpg" />
									<p>1房1厅1卫80㎡</p>
								</a>
								<a class="swiper-slide column">
									<img src="images/banner.jpg" />
									<p>1房1厅1卫80㎡</p>
								</a>
								<a class="swiper-slide column">
									<img src="images/banner.jpg" />
									<p>1房1厅1卫80㎡</p>
								</a>
								<a class="swiper-slide column">
									<img src="images/banner.jpg" />
									<p>1房1厅1卫80㎡</p>
								</a>
							</div>
						</div>
					</div>
				</div>
				<div class="scan-list">
					<a href="tel:0898" class="tel"><img src="images/icon/tel.png" alt=""></a>
					<a href="#" class="row">
						<img src="images/list.jpg" alt="" class="scan-pic">
						<div class="column">
							<div class="row">
								<h2>儋州商圈</h2>
								<label class="row on-sale">在售</label>
							</div>
							<em>13000-23000/㎡</em>
							<div class="row">
								<img src="images/icon/location.png" alt="">
								<p>儋州市迎宾大道与国盛路交汇处</p>
							</div>
							<div class="row">
								<span class="row">特色别墅</span>
								<span class="row">宜居生态</span>
								<span class="row">景观居所</span>
							</div>
						</div>
					</a>
					<div class="main-box">
						<div class="main-house" onclick="clickHouse(this,2)">主推户型&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;5居/4居/3居</div>
						<div class="swiper-container">
							<div class="swiper-wrapper">
								<a class="swiper-slide column">
									<img src="images/banner.jpg" />
									<p>1房1厅1卫80㎡</p>
								</a>
								<a class="swiper-slide column">
									<img src="images/banner.jpg" />
									<p>1房1厅1卫80㎡</p>
								</a>
								<a class="swiper-slide column">
									<img src="images/banner.jpg" />
									<p>1房1厅1卫80㎡</p>
								</a>
								<a class="swiper-slide column">
									<img src="images/banner.jpg" />
									<p>1房1厅1卫80㎡</p>
								</a>
								<a class="swiper-slide column">
									<img src="images/banner.jpg" />
									<p>1房1厅1卫80㎡</p>
								</a>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>

		<script src="js/jquery.min.js"></script>
		<script src="js/wap.js"></script>
		<script src="js/swiper.min.js"></script>
		<script>
			//  点击主推户型
			function clickHouse(e, num) {
				if ($(e).hasClass('on')) {
					$(e).removeClass('on');
					$(e).siblings('.swiper-container').slideUp();
				} else {
					$(e).addClass('on');
					$(e).siblings('.swiper-container').slideDown();
					$(e).siblings('.swiper-container').addClass('swiper-container' + num);
					var swiper = new Swiper('.swiper-container' + num, {
						slidesPerView: 3,
						slidesOffsetBefore: 10,
						spaceBetween: 10
					});
				}
			}
			//筛选条件
			function clickOption(e) {
				if ($(e).hasClass('on')) {
					$('.filter ul.row li').removeClass('on');
					$('.filter').removeClass('totop');
					$('.mask').fadeOut();
					$('.options').fadeOut();
				} else {
					$('.filter ul.row li').removeClass('on');
					$(e).addClass('on');
					var n = $('.filter ul.row li').index(e);
					$('.filter').addClass('totop');
					$('.options').fadeIn();
					$('.options .option').hide().eq(n).show();
					$('.mask').show();
				}
			}
			//筛选位置条件
			function clickProvice(e, type) {
				$(e).siblings('a').removeClass('on');
				$(e).addClass('on');
				if (type == 1) {
					$('.option-city').css('display', 'flex');
				} else {
					$('.option-city').css('display', 'none');
					$('.option-area').css('display', 'none');
				}
			}
			function clickCity(e, type) {
				$(e).siblings('a').removeClass('on');
				$(e).addClass('on');
				if (type == 1) {
					$('.option-area').css('display', 'flex');
				} else {
					$('.option-area').css('display', 'none');
				}
			}
			function clickArea(e, type) {
				$(e).siblings('a').removeClass('on');
				$(e).addClass('on');
				setTimeout(function() {
					$('.filter ul.row li').removeClass('on');
					$('.filter').removeClass('totop');
					$('.mask').fadeOut();
					$('.options').hide();
				}, 800);
			}
			//筛选价格条件
			function clickPrice(e) {
				$(e).siblings('li').removeClass('on');
				$(e).addClass('on');
				setTimeout(function() {
					$('.filter ul.row li').removeClass('on');
					$('.filter').removeClass('totop');
					$('.mask').fadeOut();
					$('.options').hide();
				}, 800);
			}
			//筛选房型条件
			function clickType(e) {
				if ($(e).hasClass('on')) {
					$(e).removeClass('on');
				} else {
					$(e).addClass('on');
				}
			}
			//筛选更多条件
			function clickTab(e) {
				if ($(e).hasClass('on')) {
					$(e).removeClass('on');
				} else {
					$(e).addClass('on');
				}
			}
			//点击重置
			$('.tabBtn a.reset').click(function() {
				$('.options .option .tab a').removeClass('on');
			});
		</script>
	</body>

</html>